<!--<template>-->
<!--  <div class="article-page">-->
<!--    &lt;!&ndash; 左侧目录 &ndash;&gt;-->
<!--    <div class="toc-container">-->
<!--      <div class="toc-header">-->
<!--        <i class="el-icon-notebook-2"></i>-->
<!--        <span>文章目录</span>-->
<!--      </div>-->
<!--      <div class="toc-content">-->
<!--        <ul>-->
<!--          <li-->
<!--            v-for="item in toc"-->
<!--            :key="item.id"-->
<!--            :class="['toc-item', { active: activeId === item.id }]"-->
<!--            :style="{ paddingLeft: `${(item.level - 1) * 16 + 12}px` }"-->
<!--          >-->
<!--            <a-->
<!--              href="javascript:void(0);"-->
<!--              @click="scrollToId(item.id)"-->
<!--              @mouseover="hoverId = item.id"-->
<!--              @mouseleave="hoverId = null"-->
<!--            >-->
<!--              <span class="toc-text">{{ item.text }}</span>-->
<!--            </a>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="article-card">-->
<!--      &lt;!&ndash; 标题 &ndash;&gt;-->
<!--      <h1 class="article-title" :id="'title'">{{ article.title }}</h1>-->

<!--      &lt;!&ndash; 作者信息 &ndash;&gt;-->
<!--      <div class="article-author">-->
<!--        <el-avatar :src="article.userAvatar" size="medium" class="author-avatar"/>-->
<!--        <div class="author-info">-->
<!--          <span class="author-name">{{ article.userName }}</span>-->
<!--          <span class="author-desc">优质作者</span>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 文章元信息 &ndash;&gt;-->
<!--      <div class="article-meta">-->
<!--        <div class="meta-item">-->
<!--          <img src="~/assets/img/mysvg/时间.svg" alt="时间" class="meta-icon"/>-->
<!--          <span>{{ formatTime(article.gmtCreate) }}</span>-->
<!--        </div>-->
<!--        <div class="meta-item">-->
<!--          <img src="~/assets/img/mysvg/浏览.svg" alt="阅读" class="meta-icon"/>-->
<!--          <span>{{ article.viewCount }}</span>-->
<!--        </div>-->
<!--        <div class="meta-item">-->
<!--          <img src="~/assets/img/mysvg/赞.svg" alt="点赞" class="meta-icon"/>-->
<!--          <span>{{ article.likeCount }}</span>-->
<!--        </div>-->
<!--        <div class="meta-item">-->
<!--          <img src="~/assets/img/mysvg/评论.svg" alt="评论" class="meta-icon"/>-->
<!--          <span>{{ article.commentCount }}</span>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 封面 &ndash;&gt;-->
<!--      <el-image-->
<!--        v-if="article.cover"-->
<!--        :src="article.cover"-->
<!--        fit="cover"-->
<!--        class="cover-img"-->
<!--        lazy-->
<!--      />-->

<!--      &lt;!&ndash; 正文内容 &ndash;&gt;-->
<!--      <div-->
<!--        class="article-content"-->
<!--        v-html="article.content"-->
<!--        ref="content"-->
<!--      ></div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 底部操作栏 - 恢复原来的样式 &ndash;&gt;-->
<!--    <div class="bottom-author-bar">-->
<!--      <div class="left">-->
<!--        <el-avatar :src="article.userAvatar" size="large" class="author-avatar-bottom"/>-->
<!--        <span class="username">{{ article.userName }}</span>-->
<!--        <el-button type="primary" size="small" class="follow-btn">关注</el-button>-->
<!--      </div>-->

<!--      <div class="right">-->
<!--        <div class="custom-icon-btn" v-tooltip="'点赞'" @click="handleLike">-->
<!--          <img src="~/assets/img/mysvg/赞.svg" alt="点赞"/>-->
<!--          <span>{{ likeCount }}</span>-->
<!--        </div>-->
<!--        <div class="custom-icon-btn" v-tooltip="'收藏'" @click="handleCollect">-->
<!--          <img src="~/assets/img/mysvg/收藏.svg" alt="收藏"/>-->
<!--          <span>收藏</span>-->
<!--        </div>-->
<!--        <div class="custom-icon-btn" v-tooltip="'评论'" @click="handleComment">-->
<!--          <img src="~/assets/img/mysvg/评论.svg" alt="评论" style="height: 30px; width: 30px; margin-bottom: -3px;"/>-->
<!--          <span>{{ article.commentCount }}</span>-->
<!--        </div>-->
<!--        <div class="custom-icon-btn" v-tooltip="'分享'" @click="handleShare">-->
<!--          <img src="~/assets/img/mysvg/分享.svg" alt="分享"/>-->
<!--          <span>分享</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 评论侧边栏 &ndash;&gt;-->
<!--    <transition name="slide">-->
<!--      <div class="comment-sidebar" v-if="showCommentSidebar">-->
<!--        <div class="comment-header">-->
<!--          <span>评论区</span>-->
<!--          <i class="el-icon-close" @click="showCommentSidebar = false"></i>-->
<!--        </div>-->
<!--        <div class="comment-body">-->
<!--          <CommentSection-->
<!--            :targetId="currentId"-->
<!--            targetType="ARTICLE"-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->
<!--    </transition>-->

<!--  </div>-->
<!--</template>-->
<template>
  <div class="article-page">
    <!-- 左侧目录 -->
    <div class="toc-container">
      <div class="toc-header">
        <i class="el-icon-notebook-2"></i>
        <span>文章目录</span>
      </div>
      <div class="toc-content">
        <ul>
          <li
            v-for="item in toc"
            :key="item.id"
            :class="['toc-item', { active: activeId === item.id }]"
            :style="{ paddingLeft: `${(item.level - 1) * 16 + 12}px` }"
          >
            <a
              href="javascript:void(0);"
              @click="scrollToId(item.id)"
              @mouseover="hoverId = item.id"
              @mouseleave="hoverId = null"
            >
              <span class="toc-text">{{ item.text }}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="article-card">
      <!-- 标题 -->
      <h1 class="article-title" :id="'title'">{{ article.title }}</h1>

      <!-- 作者信息 -->
      <div class="article-author">
        <el-avatar :src="article.userAvatar" size="medium" class="author-avatar" />
        <div class="author-info">
          <span class="author-name" style="font-weight: 600 !important;">{{ article.userName }}</span>
          <span class="author-desc">优质作者</span>
        </div>
      </div>

      <!-- 文章元信息 -->
      <div class="article-meta">
        <div class="meta-item">
          <img src="~/assets/img/mysvg/时间.svg" alt="时间" class="meta-icon" />
          <span>{{ formatTime(article.gmtCreate) }}</span>
        </div>
        <div class="meta-item">
          <img src="~/assets/img/mysvg/浏览.svg" alt="阅读" class="meta-icon" />
          <span>{{ article.viewCount }}</span>
        </div>
        <div class="meta-item">
          <img src="~/assets/img/mysvg/赞.svg" alt="点赞" class="meta-icon" />
          <span>{{ article.likeCount }}</span>
        </div>
        <div class="meta-item">
          <img src="~/assets/img/mysvg/评论.svg" alt="评论" class="meta-icon" />
          <span>{{ article.commentCount }}</span>
        </div>
      </div>

      <!-- 封面 -->
      <el-image
        v-if="article.cover"
        :src="article.cover"
        fit="cover"
        class="cover-img"
        lazy
      />

      <!-- 正文内容 -->
      <div class="article-content" v-html="article.content" ref="content"></div>
    </div>

    <!-- 底部操作栏 - 恢复原来的样式 -->
    <div class="bottom-author-bar">
      <div class="left">
        <el-avatar :src="article.userAvatar" size="large" class="author-avatar-bottom" />
        <span class="username">{{ article.userName }}</span>
        <el-button type="primary" size="small" class="follow-btn">关注</el-button>
      </div>

      <div class="right">
        <div class="custom-icon-btn" v-tooltip="'点赞'" @click="handleLike">
          <img src="~/assets/img/mysvg/赞.svg" alt="点赞" />
          <span>{{ likeCount }}</span>
        </div>
        <div class="custom-icon-btn" v-tooltip="'收藏'" @click="handleCollect">
          <img src="~/assets/img/mysvg/收藏.svg" alt="收藏" />
          <span>收藏</span>
        </div>
        <div
          class="custom-icon-btn"
          v-tooltip="'评论'"
          @click="handleComment"
        >
          <img
            src="~/assets/img/mysvg/评论.svg"
            alt="评论"
            style="height: 30px; width: 30px; margin-bottom: -3px;"
          />
          <span>{{ article.commentCount }}</span>
        </div>
        <div class="custom-icon-btn" v-tooltip="'分享'" @click="handleShare">
          <img src="~/assets/img/mysvg/分享.svg" alt="分享" />
          <span>分享</span>
        </div>
      </div>
    </div>

    <!-- 评论侧边栏 -->
    <transition name="slide">
      <div class="comment-sidebar" v-if="showCommentSidebar">
        <div class="comment-header">
          <span>评论区</span>
          <i class="el-icon-close" @click="showCommentSidebar = false"></i>
        </div>
        <div class="comment-body">
          <CommentSection :targetId="currentId" targetType="ARTICLE" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import ArticleApi from '~/api/article'
import CommentSection from "~/components/CommentSection.vue";

export default {
  name: 'ArticleDetail',
  components: { CommentSection },
  data() {
    return {
      article: {},
      toc: [],
      activeId: null,
      hoverId: null,
      isLiked: false,
      isCollected: false,
      likeCount: 0,
      showCommentSidebar: false,
      currentId: null
    }
  },
  mounted() {
    this.fetchArticle()
    window.addEventListener('scroll', this.onScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll)
  },
  methods: {
    async fetchArticle() {
      try {
        const res = await ArticleApi.getArticleById(this.$route.params.id)
        if (res.data.code === 20000) {
          this.article = res.data.data
          this.likeCount = res.data.data.likeCount || 0
          this.currentId = res.data.data.articleId

          // 等文章渲染完再生成目录
          this.$nextTick(() => {
            this.generateToc()
          })
        } else {
          this.$message.error('获取文章失败')
        }
      } catch (e) {
        console.error('获取文章出错:', e)
        this.$message.error('获取文章失败，请稍后重试')
      }
    },
    formatTime(dateStr) {
      const date = new Date(dateStr)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    generateToc() {
      const contentEl = this.$refs.content
      if (!contentEl) return
      const headingNodes = contentEl.querySelectorAll('h1, h2, h3')
      let tocList = []
      headingNodes.forEach((node, idx) => {
        if (!node.id) {
          node.id = 'heading-' + idx
        }
        tocList.push({
          id: node.id,
          text: node.innerText || node.textContent,
          level: parseInt(node.tagName.substring(1))
        })
      })
      this.toc = tocList
    },
    scrollToId(id) {
      const el = document.getElementById(id)
      if (el) {
        const yOffset = -80
        const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset
        window.scrollTo({ top: y, behavior: 'smooth' })
      }
    },
    onScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let currentId = null

      for (const item of this.toc) {
        const el = document.getElementById(item.id)
        if (el) {
          const top = el.getBoundingClientRect().top
          if (top <= 100) {
            currentId = item.id
          }
        }
      }

      if (currentId) {
        this.activeId = currentId
      }
    },
    handleLike() {
      this.isLiked = !this.isLiked
      this.likeCount = this.isLiked ? this.likeCount + 1 : this.likeCount - 1
    },
    handleCollect() {
      this.isCollected = !this.isCollected
      this.$message({
        message: this.isCollected ? '收藏成功' : '已取消收藏',
        type: 'success'
      })
    },
    handleComment() {
      this.showCommentSidebar = true
    },
    handleShare() {
      this.$message('分享功能开发中')
    }
  }
}
</script>
<style lang="scss" scoped>
.article-page {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
  background-color: #f9f9f9;
}

/* 左侧目录样式 - 向左移动 */
.toc-container {
  position: sticky;
  top: 80px;
  width: 240px;
  margin-right: 10px;
  margin-left: -160px; /* 向左移动 */
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  align-self: flex-start;
  flex-shrink: 0;

  .toc-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;

    i {
      margin-right: 8px;
      color: #1e90ff;
    }
  }

  .toc-content {
    padding: 8px 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(30, 144, 255, 0.3);
      border-radius: 2px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .toc-item {
      margin: 0;
      line-height: 32px;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: transparent;
        transition: all 0.3s;
      }

      &:hover {
        background-color: #f5f9ff;

        &::before {
          background-color: #cce0ff;
        }

        .toc-text {
          color: #1e90ff;
        }
      }

      &.active {
        background-color: #f0f7ff;

        &::before {
          background-color: #1e90ff;
        }

        .toc-text {
          color: #1e90ff;
          font-weight: 500;
        }
      }

      a {
        display: block;
        padding-right: 16px;
        text-decoration: none;
        color: #555;
        transition: all 0.2s;

        .toc-text {
          display: inline-block;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }
      }
    }
  }
}

/* 文章主体样式 */
.article-card {
  flex: 1;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 30px 40px;
  margin-left: 10px; /* 与目录间距调整 */
}

.article-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* 头像相关样式 */
.article-author {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .author-avatar {
    margin-right: 12px;
    width: 40px;
    height: 40px;

    /* 保证头像铺满圆形且比例正常 */
    ::v-deep(img) {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      border-radius: 50%;
      display: block;
    }
  }

  .author-info {
    display: flex;
    flex-direction: column;

    .author-name {
      font-size: 15px;
      color: #333;
      font-weight: 500;
    }

    .author-desc {
      font-size: 12px;
      color: #999;
      margin-top: 2px;
    }
  }
}

.article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;

  .meta-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 14px;
    color: #666;

    .meta-icon {
      width: 18px;
      height: 18px;
      margin-right: 5px;
      filter: grayscale(100%) brightness(0.3);
      vertical-align: middle;
    }
  }
}

.cover-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 30px;
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;

  ::v-deep {
    h1, h2, h3, h4, h5, h6 {
      margin: 24px 0 16px;
      color: #222;
      font-weight: 600;
    }

    h1 {
      font-size: 24px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
    }

    h2 {
      font-size: 20px;
    }

    h3 {
      font-size: 18px;
    }

    p {
      margin: 16px 0;
    }

    img {
      max-width: 100%;
      border-radius: 4px;
      margin: 10px 0;
    }

    pre {
      background-color: #f6f8fa;
      border-radius: 4px;
      padding: 16px;
      overflow: auto;
      margin: 16px 0;
    }

    code {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      background-color: rgba(27, 31, 35, 0.05);
      border-radius: 3px;
      padding: 0.2em 0.4em;
      font-size: 85%;
    }

    blockquote {
      border-left: 4px solid #1e90ff;
      background-color: #f5f9ff;
      padding: 12px 16px;
      margin: 16px 0;
      color: #555;

      p {
        margin: 0;
      }
    }
  }
}

.comment-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;

  h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
  }
}

/* 底部固定栏 */
.bottom-author-bar {
  position: fixed;
  width: 1000px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 80px;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  margin-left: 500px;

  .left {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .username {
    font-weight: 600;
    font-size: 18px;
  }

  .follow-btn {
    margin-left: 10px;
    font-size: 15px;
    padding: 6px 18px;
  }

  .right {
    display: flex;
    gap: 24px;
  }
}

/* 底部头像调整 */
.author-avatar-bottom {
  width: 48px !important;
  height: 48px !important;

  ::v-deep(img) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50%;
    display: block;
  }
}

.custom-icon-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-icon-btn img {
  width: 26px;
  height: 26px;
  filter: grayscale(100%) brightness(0.3);
  transition: transform 0.2s, filter 0.2s;
}

.custom-icon-btn:hover img {
  transform: scale(1.2);
  filter: grayscale(0%) brightness(1);
}

.custom-icon-btn:hover {
  color: #333;
}

@media (max-width: 992px) {
  .toc-container {
    display: none;
  }

  .article-card {
    margin-left: 0;
    padding: 20px;
  }

  .bottom-author-bar {
    padding: 15px 20px;
    width: 100%;

    .right {
      gap: 15px;
    }
  }
}

/* 评论侧边栏 */
.comment-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 33.33vw; /* 占三分之一 */
  background: #fff;
  z-index: 2000;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.comment-header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: 600;
  color: #333;

  .el-icon-close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
  }

  .el-icon-close:hover {
    color: #1e90ff;
  }
}

.comment-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* 右侧滑出动画 */
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}

</style>

<!--<style lang="scss" scoped>-->
<!--.article-page {-->
<!--  display: flex;-->
<!--  max-width: 1200px;-->
<!--  margin: 0 auto;-->
<!--  padding: 20px 0;-->
<!--  position: relative;-->
<!--  background-color: #f9f9f9;-->
<!--}-->

<!--/* 左侧目录样式 - 向左移动 */-->
<!--.toc-container {-->
<!--  position: sticky;-->
<!--  top: 80px;-->
<!--  width: 240px;-->
<!--  margin-right: 10px;-->
<!--  margin-left: -160px; /* 向左移动 */-->
<!--  background: white;-->
<!--  border-radius: 4px;-->
<!--  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);-->
<!--  align-self: flex-start;-->
<!--  flex-shrink: 0;-->

<!--  .toc-header {-->
<!--    padding: 12px 16px;-->
<!--    border-bottom: 1px solid #f0f0f0;-->
<!--    font-size: 16px;-->
<!--    font-weight: 600;-->
<!--    color: #333;-->
<!--    display: flex;-->
<!--    align-items: center;-->

<!--    i {-->
<!--      margin-right: 8px;-->
<!--      color: #1e90ff;-->
<!--    }-->
<!--  }-->

<!--  .toc-content {-->
<!--    padding: 8px 0;-->
<!--    max-height: calc(100vh - 160px);-->
<!--    overflow-y: auto;-->

<!--    &::-webkit-scrollbar {-->
<!--      width: 4px;-->
<!--    }-->

<!--    &::-webkit-scrollbar-thumb {-->
<!--      background-color: rgba(30, 144, 255, 0.3);-->
<!--      border-radius: 2px;-->
<!--    }-->

<!--    ul {-->
<!--      list-style: none;-->
<!--      padding: 0;-->
<!--      margin: 0;-->
<!--    }-->

<!--    .toc-item {-->
<!--      margin: 0;-->
<!--      line-height: 32px;-->
<!--      position: relative;-->

<!--      &::before {-->
<!--        content: '';-->
<!--        position: absolute;-->
<!--        left: 0;-->
<!--        top: 0;-->
<!--        bottom: 0;-->
<!--        width: 3px;-->
<!--        background-color: transparent;-->
<!--        transition: all 0.3s;-->
<!--      }-->

<!--      &:hover {-->
<!--        background-color: #f5f9ff;-->

<!--        &::before {-->
<!--          background-color: #cce0ff;-->
<!--        }-->

<!--        .toc-text {-->
<!--          color: #1e90ff;-->
<!--        }-->
<!--      }-->

<!--      &.active {-->
<!--        background-color: #f0f7ff;-->

<!--        &::before {-->
<!--          background-color: #1e90ff;-->
<!--        }-->

<!--        .toc-text {-->
<!--          color: #1e90ff;-->
<!--          font-weight: 500;-->
<!--        }-->
<!--      }-->

<!--      a {-->
<!--        display: block;-->
<!--        padding-right: 16px;-->
<!--        text-decoration: none;-->
<!--        color: #555;-->
<!--        transition: all 0.2s;-->

<!--        .toc-text {-->
<!--          display: inline-block;-->
<!--          width: 100%;-->
<!--          white-space: nowrap;-->
<!--          overflow: hidden;-->
<!--          text-overflow: ellipsis;-->
<!--          font-size: 14px;-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->

<!--/* 文章主体样式 */-->
<!--.article-card {-->
<!--  flex: 1;-->
<!--  background: white;-->
<!--  border-radius: 4px;-->
<!--  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);-->
<!--  padding: 30px 40px;-->
<!--  margin-left: 10px; /* 与目录间距调整 */-->
<!--}-->

<!--.article-title {-->
<!--  font-size: 28px;-->
<!--  font-weight: 600;-->
<!--  color: #333;-->
<!--  margin-bottom: 16px;-->
<!--  line-height: 1.4;-->
<!--}-->

<!--.article-author {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 20px;-->

<!--  .author-avatar {-->
<!--    margin-right: 12px;-->
<!--  }-->

<!--  .author-info {-->
<!--    display: flex;-->
<!--    flex-direction: column;-->

<!--    .author-name {-->
<!--      font-size: 15px;-->
<!--      color: #333;-->
<!--      font-weight: 500;-->
<!--    }-->

<!--    .author-desc {-->
<!--      font-size: 12px;-->
<!--      color: #999;-->
<!--      margin-top: 2px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.article-meta {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 24px;-->
<!--  padding-bottom: 16px;-->
<!--  border-bottom: 1px solid #f0f0f0;-->

<!--  .meta-item {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    margin-right: 20px;-->
<!--    font-size: 14px;-->
<!--    color: #666;-->

<!--    .meta-icon {-->
<!--      width: 18px;-->
<!--      height: 18px;-->
<!--      margin-right: 5px;-->
<!--      filter: grayscale(100%) brightness(0.3);-->
<!--      vertical-align: middle;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.cover-img {-->
<!--  width: 100%;-->
<!--  max-height: 400px;-->
<!--  object-fit: cover;-->
<!--  border-radius: 4px;-->
<!--  margin-bottom: 30px;-->
<!--}-->

<!--.article-content {-->
<!--  font-size: 16px;-->
<!--  line-height: 1.8;-->
<!--  color: #333;-->

<!--  ::v-deep {-->
<!--    h1, h2, h3, h4, h5, h6 {-->
<!--      margin: 24px 0 16px;-->
<!--      color: #222;-->
<!--      font-weight: 600;-->
<!--    }-->

<!--    h1 {-->
<!--      font-size: 24px;-->
<!--      border-bottom: 1px solid #eee;-->
<!--      padding-bottom: 8px;-->
<!--    }-->

<!--    h2 {-->
<!--      font-size: 20px;-->
<!--    }-->

<!--    h3 {-->
<!--      font-size: 18px;-->
<!--    }-->

<!--    p {-->
<!--      margin: 16px 0;-->
<!--    }-->

<!--    img {-->
<!--      max-width: 100%;-->
<!--      border-radius: 4px;-->
<!--      margin: 10px 0;-->
<!--    }-->

<!--    pre {-->
<!--      background-color: #f6f8fa;-->
<!--      border-radius: 4px;-->
<!--      padding: 16px;-->
<!--      overflow: auto;-->
<!--      margin: 16px 0;-->
<!--    }-->

<!--    code {-->
<!--      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;-->
<!--      background-color: rgba(27, 31, 35, 0.05);-->
<!--      border-radius: 3px;-->
<!--      padding: 0.2em 0.4em;-->
<!--      font-size: 85%;-->
<!--    }-->

<!--    blockquote {-->
<!--      border-left: 4px solid #1e90ff;-->
<!--      background-color: #f5f9ff;-->
<!--      padding: 12px 16px;-->
<!--      margin: 16px 0;-->
<!--      color: #555;-->

<!--      p {-->
<!--        margin: 0;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.comment-section {-->
<!--  margin-top: 40px;-->
<!--  padding-top: 20px;-->
<!--  border-top: 1px solid #f0f0f0;-->

<!--  h3 {-->
<!--    font-size: 18px;-->
<!--    color: #333;-->
<!--    margin-bottom: 20px;-->
<!--  }-->
<!--}-->

<!--.bottom-author-bar {-->
<!--  position: fixed;-->
<!--  width: 1000px;-->
<!--  margin: 0 auto;-->
<!--  left: 0;-->
<!--  right: 0;-->
<!--  bottom: 0;-->
<!--  background: #ffffff;-->
<!--  border-top: 1px solid #e0e0e0;-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 20px 80px;-->
<!--  z-index: 1000;-->
<!--  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);-->
<!--  margin-left: 500px;-->
<!--}-->

<!--.bottom-author-bar .left {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 14px;-->
<!--}-->

<!--.bottom-author-bar .username {-->
<!--  font-weight: 600;-->
<!--  font-size: 18px;-->
<!--}-->

<!--.bottom-author-bar .follow-btn {-->
<!--  margin-left: 10px;-->
<!--  font-size: 15px;-->
<!--  padding: 6px 18px;-->
<!--}-->

<!--.bottom-author-bar .right {-->
<!--  display: flex;-->
<!--  gap: 24px;-->
<!--}-->

<!--.custom-icon-btn {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 6px;-->
<!--  font-size: 16px;-->
<!--  color: #666;-->
<!--  cursor: pointer;-->
<!--  transition: all 0.2s;-->
<!--}-->

<!--.custom-icon-btn img {-->
<!--  width: 26px;-->
<!--  height: 26px;-->
<!--  filter: grayscale(100%) brightness(0.3);-->
<!--  transition: transform 0.2s, filter 0.2s;-->
<!--}-->

<!--.custom-icon-btn:hover img {-->
<!--  transform: scale(1.2);-->
<!--  filter: grayscale(0%) brightness(1);-->
<!--}-->

<!--.custom-icon-btn:hover {-->
<!--  color: #333;-->
<!--}-->

<!--@media (max-width: 992px) {-->
<!--  .toc-container {-->
<!--    display: none;-->
<!--  }-->

<!--  .article-card {-->
<!--    margin-left: 0;-->
<!--    padding: 20px;-->
<!--  }-->

<!--  .bottom-author-bar {-->
<!--    padding: 15px 20px;-->
<!--    width: 100%;-->

<!--    .right {-->
<!--      gap: 15px;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--/* 评论侧边栏 */-->
<!--.comment-sidebar {-->
<!--  position: fixed;-->
<!--  top: 0;-->
<!--  right: 0;-->
<!--  height: 100%;-->
<!--  width: 33.33vw; /* 占三分之一 */-->
<!--  background: #fff;-->
<!--  z-index: 2000;-->
<!--  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.comment-header {-->
<!--  height: 60px;-->
<!--  padding: 0 20px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--  border-bottom: 1px solid #eee;-->
<!--  font-size: 18px;-->
<!--  font-weight: 600;-->
<!--  color: #333;-->

<!--  .el-icon-close {-->
<!--    cursor: pointer;-->
<!--    font-size: 20px;-->
<!--    color: #666;-->
<!--  }-->

<!--  .el-icon-close:hover {-->
<!--    color: #1e90ff;-->
<!--  }-->
<!--}-->

<!--.comment-body {-->
<!--  padding: 20px;-->
<!--  overflow-y: auto;-->
<!--  flex: 1;-->
<!--}-->

<!--/* 右侧滑出动画 */-->
<!--.slide-enter-active, .slide-leave-active {-->
<!--  transition: transform 0.3s ease;-->
<!--}-->
<!--.slide-enter, .slide-leave-to {-->
<!--  transform: translateX(100%);-->
<!--}-->

<!--</style>-->
